<template>
  <!-- <div class="relative h-[calc(100vh-90px)] overflow-y-hidden overflow-x-hidden"> -->
  <div class="relative h-full overflow-y-hidden overflow-x-hidden">
    <div class="px-[70px] py-[20px] h-full">
      <div class="flex justify-between">
        <Status :status="status" />
        <Controller @refresh="getStatus" @createBatch="createBatch" :status="status" @openSetting="openSetting = true" />
        <Fault />
      </div>
      <a-tabs v-model:value="currentKey" destroyInactiveTabPane @change="(e: any) => (currentKey = e)">
        <a-tab-pane key="1" tab="表金属杂质检测数据">
          <MetalImpurities class="mt-[20px]" ref="metalRef" />
        </a-tab-pane>
        <a-tab-pane key="2" tab="样品列表">
          <SampleList ref="sampleListRef" class="mt-[20px]" @add="addOpen = true" />
        </a-tab-pane>
        <template v-if="currentKey === '2'" #rightExtra>
          <div class="flex items-center cursor-pointer" @click="addOpen = true">
            <img src="@/assets/images/add_template1.png" class="w-[117px] h-[37px]" />
            <!-- <span class="text-[16px] ml-[6px] text-[#53DCFF]">添加样品列表</span> -->
          </div>
        </template>
        <template v-if="currentKey === '1'" #rightExtra>
          <div class="flex items-center cursor-pointer" @click="exportData">
            <img src="@/assets/images/export_img.png" class="w-[117px] h-[37px]" />
            <!-- <span class="text-[16px] ml-[6px] text-[#53DCFF]">导出报告</span> -->
          </div>
        </template>
      </a-tabs>
    </div>
  </div>
  <a-drawer title="创建Batch" placement="right" :closable="false" :open="open" :get-container="false" :style="{ position: 'absolute' }" @close="onClose">
    <CreateBatch v-if="open" @dismiss="onClose" />
  </a-drawer>
  <a-drawer
    title="添加样品"
    placement="right"
    :closable="false"
    :open="addOpen"
    :get-container="false"
    :style="{ position: 'absolute' }"
    @close="addOpen = false"
  >
    <div class="relative h-full text-[12px] !text-label-normal">
      <a-spin :spinning="loading"><AddTemplate ref="addTemplateRef" v-if="addOpen"></AddTemplate> </a-spin>
      <DrawerButton class="absolute bottom-0 right-0" @cancel="addOpen = false" @ok="importTemplate" />
    </div>
  </a-drawer>
  <a-drawer
    title="设置"
    placement="right"
    :closable="false"
    :open="openSetting"
    :get-container="false"
    :style="{ position: 'absolute' }"
    @close="addOpen = false"
  >
    <div class="relative h-full text-[12px] !text-label-normal">
      <a-spin :spinning="loading">
        <Setting ref="settingRef" v-if="openSetting" />
      </a-spin>
      <DrawerButton class="absolute bottom-0 right-0" @cancel="openSetting = false" @ok="getSetting" />
    </div>
  </a-drawer>
</template>
<script setup lang="ts">
import Status from './status/index.vue';
import Controller from './controller/index.vue';
import Fault from './fault/index.vue';
import SampleList from './sample_list/index.vue';
import AddTemplate from './sample_list/components/AddTemplate.vue';
import MetalImpurities from './metal_impurities/index.vue';
import { apiControllerStatus, apiGetCurrentBatch, apiImportSamples } from '@/http/api/controller_status';
import { message } from 'ant-design-vue';
import Setting from '@/views/controller_status/controller/components/Setting.vue';
import CreateBatch from './components/CreateBatch.vue';
import { useTitle } from '@/store/title';
import { useSocketMsg } from '@/store/socket_msg';
import { eventBus } from '@/utils/event_bus';

const open = ref(false);
const addOpen = ref(false);
const openSetting = ref(false);
const loading = ref(false);
const settingRef = ref();
const metalRef = ref();
const status = ref('');
const addTemplateRef = ref();
const sampleListRef = ref();
const currentKey = ref('1');
const storeTitle = useTitle();
let timer: any = null;

const storeSocketMsg = useSocketMsg();
const onClose = () => {
  open.value = false;
  getCurrentBatchName();
};
const createBatch = () => {
  open.value = true;
};
const exportData = () => {
  if (metalRef.value) {
    metalRef.value.exportData();
  }
};
const importTemplate = async () => {
  if (addTemplateRef.value) {
    const data = addTemplateRef.value.getData();
    if (loading.value) return;
    loading.value = true;
    try {
      const res = await apiImportSamples(data);
      message.success(res.msg);
      // addOpen.value = false;
      refresh();
    } catch (error) {
      message.error((error as any).msg);
      refresh();
    } finally {
      loading.value = false;
    }
  }
};
const getSetting = async () => {
  if (settingRef.value) {
    // const data = settingRef.value.getData();
    try {
      await settingRef.value.submit();
      openSetting.value = false;
    } catch (error) {}
  }
};
const getCurrentBatchName = async () => {
  try {
    const res = await apiGetCurrentBatch();
    storeTitle.currentBatchName = res.data.batch;
  } catch (error) {
    storeTitle.currentBatchName = '';
  }
};
const getStatus = async () => {
  try {
    const res = await apiControllerStatus();
    status.value = res.data.status;
  } catch (error) {}
};
onBeforeMount(() => {
  // timer = setInterval(getStatus, 60 * 1000);
  getStatus();
  getCurrentBatchName();
  eventBus.on('refresh_status', refreshAll);
});
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
  storeTitle.currentBatchName = '';
});

const refresh = () => {
  if (sampleListRef.value) {
    sampleListRef.value.refresh();
  }
};
const refreshAll = () => { 
  if (sampleListRef.value) {
    sampleListRef.value.refresh();
  }
  if (metalRef.value) {
    metalRef.value.refresh();
  }
  getStatus();
};
watch(
  () => storeSocketMsg.status,
  val => {
    if (val) {
      getStatus();
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
watch(
  () => storeSocketMsg.sample_status,
  val => {
    if (val) {
      if (sampleListRef.value) {
        sampleListRef.value.refresh();
      }
      if (metalRef.value) {
        metalRef.value.refresh();
      }
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>
<style lang="less" scoped>
:deep(.ant-input) {
  color: #e6e6e6 !important;
  background-color: #242424 !important;
  border: none;
}
:deep(.ant-tabs-nav) {
  margin: 0 !important;
}
</style>
